<template>
  <fwb-table hoverable id="table">
    <fwb-table-head>
      <fwb-table-head-cell class="w-[10px] s4k:w-[20px] s2k:w-[13.3px]">
        <fwb-checkbox v-model="checkAll" id="checkAll" @change="selectAllItems" />
      </fwb-table-head-cell>
      <fwb-table-head-cell class="w-[10px] p-0 s4k:w-[20px]"></fwb-table-head-cell>
      <fwb-table-head-cell class="relative headCell" v-for="v in tableHeadCell" :key="v.name"
        @mouseleave="handleMouseLeave(v.id)" @mouseenter="handleMouseEnter(v.id)">
        {{ v.name }}
        <svg-icon v-show="headCell == v.id" name="id" width="13.33px" height="16px"
          class="svg absolute right-[10px] s4k:right-[20px]"></svg-icon>
      </fwb-table-head-cell>
      <fwb-table-head-cell></fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row v-for="v in tableData" :key="v.id" @mouseenter="rowMouseEnter(v)" @mouseleave="rowMouseLeave(v)"
        :class="{ selectTr: v.checked }">
        <fwb-table-cell>
          <fwb-checkbox v-model="v.checked" @change="checkboxChange(v)" id="checkAll" />
        </fwb-table-cell>
        <fwb-table-cell class="px-0">
          <div class="flex relative w-[93.33px] h-[56px] s4k:w-[186.66px] s4k:h-[112px]">
            <img v-lazy="imgUrl + v.id" alt="" class="w-[93.33px] h-[56px] s4k:w-[186.66px] s4k:h-[112px]" />
            <img :src="videoImg" alt=""
              class="w-[30.46px] absolute transform top-[50%] left-[50%] -translate-y-1/2 -translate-x-1/2 z-[100] opacity-50 s4k:w-[60.92px]" />
            <!-- <img v-if="v.state || v.checked" :src="videoImg" alt="" class="w-[30.46px] absolute transform top-[50%] left-[50%] -translate-y-1/2 -translate-x-1/2 z-[100] opacity-50 s4k:w-[60.92px]"> -->
          </div>
        </fwb-table-cell>
        <fwb-table-cell class="col">PLT0002</fwb-table-cell>
        <fwb-table-cell>Reception</fwb-table-cell>
        <fwb-table-cell>Continuous</fwb-table-cell>
        <fwb-table-cell>02/02/2024, 09:00:00</fwb-table-cell>
        <fwb-table-cell>02/02/2024, 21:00:00</fwb-table-cell>
        <fwb-table-cell>12:00:00</fwb-table-cell>
        <fwb-table-cell class="relative">
          <svg-icon v-show="rowCell == v.id" name="download" width="20px" height="20px" :class="[
            'svgClass s2ksvg s4ksvg absolute right-[20px] top-[50%] transform -translate-y-1/2 s4k:right-[40px] s2k:top-[45%] s2k:right-[26.6px]',
            { svgDownload: v.checked },
          ]" @click="downloadShow = v.id"></svg-icon>
          <div v-show="downloadShow == v.id" @mouseleave="downloadShow = 0"
            class="w-[100px] h-[118px] bg-[var(--theme)] border border-solid border-[var(--grid)] text-[1.13rem] rounded-[10px] absolute right-[6px] top-[60px] z-[100] font-normal flex flex-col justify-evenly items-start cursor-pointer py-[6px] s4k:w-[200px] s4k:h-[236px] s4k:right-[32px] s4k:top-[120px] s4k:py-[12px] s2k:w-[133.3px] s2k:h-[157.3px] s2k:top-[80px] s2k:py-[8px]">
            <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center items-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
              @click="downloadShow = 0">
              <span class="w-full mr-[11px] text-center">webp</span>
            </p>
            <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center items-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
              @click="downloadShow = 0">
              <span class="w-full mr-[11px] text-center">mp4</span>
            </p>
            <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center items-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
              @click="downloadShow = 0">
              <span class="w-full mr-[11px] text-center">jpg</span>
            </p>
          </div>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbCheckbox,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from "flowbite-vue";
import { onMounted, reactive, ref, watch } from "vue";
import videoImg from "@/assets/image/play.png";
const imgUrl = ref("https://picsum.photos/93/56?");
const checkAll = ref(false); // 全选
const selectedItems = ref([]); // 多个
const headCell = ref(0);
const handleMouseLeave = (num) => {
  headCell.value = 0;
};
const handleMouseEnter = (num) => {
  headCell.value = num;
};
const tableHeadCell = ref([
  {
    id: 1,
    name: "CAMERA ID",
  },
  {
    id: 2,
    name: "LOCATION",
  },
  {
    id: 3,
    name: "REASON",
  },
  {
    id: 4,
    name: "START TIME",
  },
  {
    id: 5,
    name: "END TIME",
  },
  {
    id: 6,
    name: "VIDEO LENTH",
  },
]);
// 表格数据
const tableData = ref([]);
for (let i = 0; i < 10; i++) {
  tableData.value.push({
    id: i + 1,
    checked: false,
    state: true,
  });
}
const downloadShow = ref(0) // 下载下拉框
// 行内鼠标移入
const rowCell = ref(0);
const rowMouseEnter = (obj) => {
  rowCell.value = obj.id;
  // obj.state = true
};
const rowMouseLeave = (obj) => {
  rowCell.value = 0;
  // obj.state = false
};
// 多选
const checkboxChange = (item) => {
  if (item.checked) {
    selectedItems.value.push(item);
  } else {
    const index = selectedItems.value.findIndex((selectedItem) => selectedItem === item);
    if (index > -1) {
      selectedItems.value.splice(index, 1);
    }
  }
};
let $emit = defineEmits(["passon"]);
const passOn = (arr) => {
  $emit("passon", arr);
};
watch(selectedItems.value, (newValue, oldValue) => {
  console.log('newValue',newValue)
  passOn(newValue);
});
// 全选
const selectAllItems = () => {
  tableData.value.forEach((item) => (item.checked = checkAll.value));
  if (checkAll.value) {
    selectedItems.value = [...tableData.value];
  } else {
    selectedItems.value = [];
  }
  passOn(selectedItems.value);
};
onMounted(() => {
  // const element = document.getElementById('table');
  // const distanceToTop = element.getBoundingClientRect().top;
  // console.log('distanceToTop',distanceToTop) // 133
});
// defineExpose({
//   selectedItems
// })
</script>

<style scoped lang="scss">
.svgDownload {
  color: #3f83f8;
}

#table {
  margin-top: 16px;
  border-radius: 0;
  // height: 79vh;
  height: calc(100vh - 185px); // 表格到顶部的距离 + 分页高度
  z-index: 1;

  :deep(table) {
    border-collapse: collapse;
  }

  background-color: #111928;

  th {
    color: #9ca3af;
    font-size: 1.25rem;
    font-weight: bold;
    background-color: var(--theme) !important;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border: solid var(--theme) !important;
  }

  .headCell {
    &:hover {
      background-color: #192130;
    }
  }

  tr {
    height: 88px;
    background-color: var(--theme-right);
    padding: 0;
    font-size: 1.13rem;
    font-weight: 400;
    border-bottom: solid var(--grid) 1px;

    td {
      padding-top: 15px;
      padding-bottom: 15px;
      color: var(--theme-font-color);
      margin: 100px !important;
    }

    &:hover {
      cursor: pointer;
      background-color: var(--theme-table-hover);
    }

    .col {
      font-size: 1.13rem;
      font-weight: bold;
    }
  }

  .selectTr {
    background-color: var(--theme);

    &:hover {
      background-color: var(--theme);
    }
  }

  // :deep(.bg-white){
  //   &:hover{
  //     background-color: red;
  //   }
  // }
}

#table::-webkit-scrollbar {
  width: 5px;
}

#table::-webkit-scrollbar-thumb {
  background-color: #6b7280;
  border-radius: 10px;
}

#table::-webkit-scrollbar-track {
  background-color: #4c555f;
  border-radius: 10px;
}

#checkAll {
  :deep(input) {
    border: solid var(--grid) 1px;
    background-color: var(--theme);
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 1.25rem;

    &:checked {
      background-color: #1a56db;
      border-color: #1a56db;
    }
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.4);
  }
  #checkAll {
    :deep(input) {
      width: 21.3px;
      height: 21.3px;
    }
  }
  #table {
    margin-top: 21.3px;
    height: calc(100vh - 246.67px);

    th {
      height: 66.6px;
    }

    tr {
      height: 117px;
      td {
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(2);
  }
  #checkAll {
    :deep(input) {
      width: 30px;
      height: 30px;
    }
  }
  #table {
    margin-top: 32px;
    height: calc(100vh - 370px);

    th {
      height: 100px;
    }

    tr {
      height: 176px;
      td {
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
  }
}
</style>
